<template>
  <el-tabs type="border-card" style="height:auto">
      <el-tab-pane label="已有预约">
  
        <el-descriptions v-for="(item,index) in havedReservation" :key="index"
      class="margin-top"
      :title="index+1"
      :column="3"
      border
    >
      <template #extra>
        <br>
        <el-button @click="cancelReservation(item.reserve_number,index)" type="primary">取消预约</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            预约老师姓名
          </div>
        </template>
        {{ item.teacher_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            开始时间
          </div>
        </template>
        {{ item.start_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            地点
          </div>
        </template>
        {{ item.place }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            结束时间
          </div>
        </template>
        {{ item.end_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            老师留言/预约目的
          </div>
        </template>
       {{ item.purpose }}
      </el-descriptions-item>
    </el-descriptions>
      </el-tab-pane>
  
      <el-tab-pane label="未处理的预约">
        <el-descriptions  v-for="(item,index) in untreatReservation" :key="index"
      class="margin-top"
      :title="index+1"
      :column="3"
      border
    >
      <template #extra>
        <br>
        <el-button @click="agreeReservation(item.reserve_number,index)" type="primary">批准预约</el-button>
        <el-button type="primary" @click="rejReservation(item.reserve_number,index)" >驳回预约</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            预约老师姓名
          </div>
        </template>
        {{ item.teacher_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            开始时间
          </div>
        </template>
        {{ item.start_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            地点
          </div>
        </template>
        {{ item.place }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            结束时间
          </div>
        </template>
        {{ item.end_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            老师留言/预约目的
          </div>
        </template>
       {{ item.purpose }}
      </el-descriptions-item>
    </el-descriptions>
  
  
      </el-tab-pane>
      <el-tab-pane label="驳回的预约">
        <el-descriptions  v-for="(item,index) in rejectReservation" :key="index"
      class="margin-top"
      :title="index+1"
      :column="3"
      border
    >
      <template #extra>
        <br>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            预约老师姓名
          </div>
        </template>
        {{ item.teacher_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            开始时间
          </div>
        </template>
        {{ item.start_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            地点
          </div>
        </template>
        {{ item.place }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            结束时间
          </div>
        </template>
        {{ item.end_time }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            老师留言
          </div>
        </template>
       {{ item.purpose }}
      </el-descriptions-item>
    </el-descriptions>
  
  
      </el-tab-pane>
    </el-tabs>
  </template>
  
  <script setup>
  import { computed, reactive,ref } from 'vue';
  import { useRoute,useRouter } from 'vue-router';
  import axios from 'axios';
  import { ElMessage,ElMessageBox } from 'element-plus'
  
  //获取路由传递过来的student_id
  const route=useRoute()
  const router=useRouter()
  let isShowList=ref(false)
  let isSelect=ref(false)
  let teacher_id=route.query.teacher_id
  let startTime=reactive({
    first:"",
    second:""
  })
  
  let endTime=reactive({
    first:"",
    second:""
  })
  const conservation = reactive({
    reserve_number:"",
    student_id:"",
    teacher_id:teacher_id,
    initiation_time:"",
    state:"",
    start_time:computed(()=>{
      return startTime.first+" "+startTime.second
    }),
    end_time:computed(()=>{
      return endTime.first+" "+endTime.second
    }),
    purpose:"",
    place:"",
    teacher_name:"",
    student_name:""
  })
  //axios获取该学生的所有预约信息
  const getAllReservatoin=async()=>{
    let result=await axios({
      method:"get",
      url:"http://localhost:8080/getAllReservationByTeacherID",
      params:{
        teacher_id:teacher_id
      }
    })
    return result.data 
  }
 
  let havedReservation=ref([])
  let untreatReservation=ref([])
  let rejectReservation=ref([])
  
async function getReservation(){
    let allReservation=await getAllReservatoin()
    console.log(allReservation)
    for(let i=0;i<allReservation.length;i++){
    if(allReservation[i].state=='已通过'){
      havedReservation.value.push(allReservation[i])
    }
    else if(allReservation[i].state=='已驳回'){
      rejectReservation.value.push(allReservation[i])
    }
    else{
      untreatReservation.value.push(allReservation[i])
    }
  }
  }
  getReservation()

  //传入预约编号，根据预约编号删除指定的预约
  async function deleteReservation(reserve_number){
    let result=await axios({
      method:"get",
      url:"http://localhost:8080/deleteReservation",
      params:{
        reserve_number:reserve_number
      }
    })
    return result.data
  }
  async function updateReservation(reserve_number){
    let result=await axios({
      method:"get",
      url:"http://localhost:8080/updateReservation",
      params:{
        reserve_number:reserve_number
      }
    })
    return result.data
  }
  
  async function UpdateReservationStatePurpose(reserve_number,purpose){
    let result=await axios({
      method:"get",
      url:"http://localhost:8080/updateReservationStatePurpose",
      params:{
        reserve_number:reserve_number,
        purpose:purpose
      }
    })
    return result.data
  }
  //取消一条预约
  function cancelReservation(reserve_number,index){
    //首先给老师发送消息，待老师同意后，该条预约才可以被删除
    ElMessageBox.confirm(
      '是否确定取消该次预约?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async() => {
        let result=deleteReservation(reserve_number)
        console.log(result)
        if(result){
        ElMessage({
          type: 'success',
          message: '取消预约成功',
        })}
        debugger
      //将数组中的index序号的预约去除
      havedReservation.value.splice(index,1)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '没有取消本次预约',
        })
      })
  }
  //撤回一条预约
  function withdrawReservation(reserve_number,index){
    //询问是否撤回此次预约
    ElMessageBox.confirm(
      '是否确定撤回该次预约?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async() => {
        let result=deleteReservation(reserve_number)
        console.log(reserve_number)
        if(result){
        ElMessage({
          type: 'success',
          message: '撤回预约成功',
        })}
      //将数组中的index序号的预约去除
      untreatReservation.value.splice(index,1)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '没有撤回本次预约',
        })
      })
  }

  function agreeReservation(reserve_number,index){
    //首先给老师发送消息，待老师同意后，该条预约才可以被删除
    ElMessageBox.confirm(
      '是否确定批准该次预约?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async() => {
        let result=await updateReservation(reserve_number)
        console.log(reserve_number)
        if(result){
        ElMessage({
          type: 'success',
          message: '批准预约成功',
        })}
      //重新赋值渲染界面
      havedReservation.value.splice(0,havedReservation.value.length)
      untreatReservation.value.splice(0,untreatReservation.value.length)
      rejectReservation.value.splice(0,rejectReservation.value.length)
      getReservation()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '未批准成功',
        })
      })
  }
function rejReservation(reserve_number,index){
  ElMessageBox.prompt('给学生留言', '提示', {
    confirmButtonText: '驳回',
    cancelButtonText: "取消",
  })
    .then( async ({ value }) => {
     let result=await UpdateReservationStatePurpose(reserve_number,value)
     console.log(result)
     if(result){
      ElMessage({
        type: 'success',
        message:"预约驳回成功",
      })
      //重新渲染界面
      havedReservation.value.splice(0,havedReservation.value.length)
      untreatReservation.value.splice(0,untreatReservation.value.length)
      rejectReservation.value.splice(0,rejectReservation.value.length)
      getReservation()
     }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '驳回未成功',
      })
    })
}
  </script>
  <style scoped>
  
  </style>